<template>
	<view class="container">
		<!-- 顶部导航 -->
		<myHeader title="关于我们" showBack />
		<view class="info-list-wrap">
			<!-- 富文本容器 -->
			<view class="rich-text-container">
				<!-- 使用 rich-text 组件渲染 HTML 内容 -->
				<rich-text class="content" :nodes="context"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	import myHeader from "@/component/header";
	import {
		getBizConfig
	} from "@/api";
	export default {
		components: {
			myHeader
		},
		data() {
			return {
				context: ''
			}
		},
		methods: {

		},
		async onLoad() {
			let res = await getBizConfig();
			this.context = res.aboutus || '';
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #141a2e;
		/* 深蓝色背景 */
		min-height: 100vh;
		/* 覆盖整个屏幕高度 */
		color: #fff;
		/* 文字颜色（可选） */
	}
	
	.info-list-wrap {
		padding: 16rpx 32rpx;
	}


	.rich-text-container {
		padding: 32rpx;
		background-color: #fff;
		border-radius: 16rpx;
		min-height: 400rpx;

		.content {
			// 继承容器样式，或自定义富文本样式
			font-size: 30rpx;
			line-height: 1.6;
			color: #333;

			// 覆盖特定标签样式（可选）
			::v-deep span {
				font-family: 宋体; // 强制使用宋体（根据需求调整）
			}

			::v-deep p {
				margin: 0 0 20rpx 0; // 段落间距
			}

			::v-deep br {
				display: block; // 确保 <br> 换行生效
				content: "";
				margin: 10rpx 0;
			}
		}
	}
</style>